<template>
  <div class="iu-chart-list">
    <div
      class="iu-chart-list-item"
      v-for="(item, index) in chartList"
      :key="index"
    >
      <div v-if="item.widgets.length > 1">
        <iuTab
          :tabs="item.widgets"
          @change="eventTabChange($event, index)"
          :selected="item.show"
        >
        </iuTab>
      </div>
      <div
        class="iu-el-tab-content"
        :key="'chart' + dti"
        v-for="(dto, dti) in item.widgets"
      >
        <!-- v-show="item.show === dti" -->
        <template v-if="item.show === dti">
          <chart-view
            :chart-item="dto"
            :code="item.code"
            :departmentId="item.departmentId"
          ></chart-view>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import ChartView from "@/components/common/chart_view/index";
import iuTab from "@/components/common/tab/index";
export default {
  name: "chart-list",
  data() {
    return {};
  },
  components: {
    ChartView,
    iuTab
  },
  props: {
    chartList: {
      type: Array,
      // default: () => []
      default: () => {
        return [
          // {
          //   sort: 0,
          //   show: 0,
          //   widgets: [
          //     {
          //       charts: [
          //         {
          //           chartType: 1,
          //           conditionValue: 1,
          //           cycleType: 0,
          //           veidoo: 1
          //         },
          //         {
          //           chartType: 2,
          //           conditionValue: 4,
          //           cycleType: 1,
          //           veidoo: 3
          //         },
          //         {
          //           chartType: 3,
          //           conditionValue: 4,
          //           cycleType: 2,
          //           veidoo: 3
          //         },
          //         {
          //           chartType: 4,
          //           conditionValue: 4,
          //           cycleType: 3,
          //           veidoo: 3
          //         }
          //       ],
          //       dataCode: ["SCSJ"],
          //       dataType: "SCSJ",
          //       name: "SCSJ1",
          //       sort: 0
          //     },
          //     {
          //       charts: [
          //         {
          //           chartType: 1,
          //           conditionValue: 1,
          //           cycleType: 0,
          //           veidoo: 1
          //         },
          //         {
          //           chartType: 2,
          //           conditionValue: 4,
          //           cycleType: 1,
          //           veidoo: 3
          //         },
          //         {
          //           chartType: 3,
          //           conditionValue: 4,
          //           cycleType: 2,
          //           veidoo: 3
          //         },
          //         {
          //           chartType: 4,
          //           conditionValue: 4,
          //           cycleType: 3,
          //           veidoo: 3
          //         }
          //       ],
          //       dataCode: ["SCSJ"],
          //       dataType: "SCSJ",
          //       name: "SCSJ2",
          //       sort: 0
          //     }
          //   ]
          // },
        ];
      }
    }
  },
  created() {},
  methods: {
    eventTabChange(eleIndex, index) {
      this.chartList[index].show = eleIndex;
    }
  }
};
</script>
<style lang="less">
.iu-chart-list {
  .iu-el-tab-content {
    background-color: #1f2037;
  }
}
</style>
